<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品标题</th>
        <th>价格</th>
        <th>颜色</th>
    </tr>
</table>
<script>
  //实例化一个空对象
  let p1 = {};
  p1.name = "张三"
  p1.age = 20;
  p1.run = function () {
    console.log(this.name+":"+this.age);
  }
  p1.run();
  //实例化一个自带属性和方法的对象
  let p2 = {
    name:"李四",
    age:35,
    run:function () {
      console.log(this.name+":"+this.age)
    }
  }
  p2.run();

  //用对象封装一个商品信息
  let product = {title:"斯伯丁篮球",price:108,color:"红色"};
  //用数组装多个对象,这样数组里面就有多个商品的信息了
  let arr = [{title:"斯伯丁篮球",price:108,color:"红色"},
    {title:"威尔逊篮球",price:158,color:"花色"},
    {title:"李宁篮球",price:98,color:"蓝色"}]

  //将数组中的商品信息添加到表格中
  let t = document.querySelector("table");
  for(let p of arr){
      let tr = document.createElement("tr");
      let titleTD = document.createElement("td");
      let priceTD = document.createElement("td");
      let colorTD = document.createElement("td");
      titleTD.innerText = p.title;
      priceTD.innerText = p.price;
      colorTD.innerText = p.color;
      tr.append(titleTD,priceTD,colorTD);
      t.append(tr);
  }
</script>
</body>
</html>